<template>
  <div class="app-container"> 
    <el-table :data="tableData" border stripe> 
       <el-table-column label='日志ID' prop="id" align="center" width="100"></el-table-column>
      <el-table-column label='操作内容' prop="content" align="center"></el-table-column>  
      <el-table-column label='操作时间' prop="updateTime" align="center" width="200"></el-table-column>  
    </el-table>
     <div style="text-align:center;margin-top:20px;"> 
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]" 
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
  </div>
  <el-dialog
    title="更新队伍"
    :visible.sync="showUpdate"
    width="400px"
    :show-close="false"
    >
    <el-form :model='tmp'>
      <el-form-item label='队伍名称'>
        <el-input v-model='tmp.name' placeholder='请输入队伍名称' style="width:200px;"></el-input>
      </el-form-item> 
    </el-form>
    <span slot="footer">
      <el-button @click="showUpdate = false">取消</el-button>
      <el-button type="primary" @click="updateHandle">更新</el-button>
    </span>
  </el-dialog>
  
  </div>
</template>

<script> 

export default { 
  data() {
    return { 
      searchModel:{
         page:0,
         pageSize:10
      },
      total:0,
      tableData:[],
      currentPage:1,
      showUpdate:false,
      tmp:{
        id:-1,
        name:null
      }
    }
  },
  created() { 
    this.getLogsList()
  },
  methods: {
    getLogsList(){
      this.$api.getLogListByPage(this.searchModel).then(res=>{
        this.total = res.total
        this.tableData = res.data 
      })
    },
    handleSizeChange(pageSize){
      this.searchModel.pageSize = pageSize
      this.getLogsList()
    },
    handleCurrentChange(currentPage){
      this.searchModel.page = currentPage-1
      this.getLogsList()
    },
    searchHandle(){
      this.getLogsList()
    },
    readyUpdate(player){
      this.tmp.id = player.id
      this.tmp.name = player.name 
      this.showUpdate = true
    },
    updateHandle(){
      this.$api.updatePlayer(this.tmp).then(res=>{
        this.getLogsList()
        this.showUpdate = false
      })
    }
  }
}
</script>
